<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #chartDiv {
      width: 100%;
      height: 100%;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;
    }
  </style>
  <title>Tree</title>
  <script src="https://cdn.amcharts.com/lib/version/4.10.2/core.js"></script>
  <script src="https://cdn.amcharts.com/lib/version/4.10.2/charts.js"></script>
  <script src="https://cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script>
</head>
<body>
<script>
  am4core.ready(() => {
    const chart = am4core.create("chartDiv", am4plugins_forceDirected.ForceDirectedTree)
    chart.dataSource.url = "./file.db.json"
    chart.zoomable = true
    const dataSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())

    dataSeries.maxLevels = 2
    // dataSeries.velocityDecay = 0.9
    dataSeries.maxRadius = am4core.percent(4)
    dataSeries.dataFields.value = "value"
    dataSeries.dataFields.name = "name"
    dataSeries.dataFields.children = "children"
    dataSeries.nodes.template.tooltipText = "{name} (keys={value}, index={i}, totalCount={tc})"
    dataSeries.nodes.template.fillOpacity = 1

    dataSeries.nodes.template.label.text = "{name}"
    dataSeries.fontSize = 10

    dataSeries.links.template.strokeWidth = 1

    const hoverState = dataSeries.links.template.states.create("hover")
    hoverState.properties.strokeWidth = 3
    hoverState.properties.strokeOpacity = 1

    dataSeries.nodes.template.events.on("over", (event) => {
      event.target.dataItem.childLinks.each((link) => {
        link.isHover = true
      })
      if (event.target.dataItem.parentLink) {
        event.target.dataItem.parentLink.isHover = true
      }
    })

    dataSeries.nodes.template.events.on("out", (event) => {
      event.target.dataItem.childLinks.each((link) => {
        link.isHover = false
      })
      if (event.target.dataItem.parentLink) {
        event.target.dataItem.parentLink.isHover = false
      }
    })
  })
</script>
<div id="chartDiv"></div>
</body>
</html>